<!-- 用户数据 -->
<template>

  <div class="pag" >
    <div class="banner">
      <h3>{{ new Date() | toDate }}数据信息</h3>
    </div>
    <div class="user-data1">
      <div class="t1">
        <div>
          <p>今日新增用户</p>
          <div :xdw="todayAdd ? '+' : ''">{{ todayAdd }}</div>
        </div>
        <p></p>
        <div>
          <p>昨日新增用户</p>
          <div :xdw="yesterdayAdd ? '+' : ''">{{ yesterdayAdd }}</div>
        </div>
      </div>
      <div class="t2">
        <label>总用户量</label>
        <label>{{ total | numAddSep}}</label>
      </div>
    </div>
    <div class="user-data2">
      <div class="t-r">
        <div class="t-c">
          <div>持币用户总量</div>
          <p style="color: #5D1D9E">{{ hold | numAddSep }}</p>
        </div>
        <div class="t-c">
          <div>有效持币用户总量<p>（账户余额大于100的）</p></div>
          <p style="color:#9949EC;">{{ effect | numAddSep }}</p>
        </div>
      </div>
      <div class="t-r">
        <div class="t-c">
          <div>激活用户总量</div>
          <p style="color:#006295;">{{ activate | numAddSep }}</p>
        </div>
        <div class="t-c">
          <div>活跃用户总量<p>（资产有变动用户）</p></div>
          <p style="color:#22A2E4;">{{ active | numAddSep }}</p>
        </div>
      </div>
      <div class="zhl">
        <div>昨日转化率<p>(注册后24小时内资产发生变化的用户 / 注册用户)</p></div>
        <p>{{ rate }}%</p>
      </div>
    </div>
  </div>

</template>

<script>
    import {getViewUser, getViewCvnt, getViewPledge } from 'api/index'


    export default {
        data() {
            return {
                "todayAdd": '',
                "yesterdayAdd": '',
                "total": '',
                "active": '',
                "hold": '',
                "effect": '',
                "activate": '',
                "rate": ''
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                vm.getData()
            })
        },
        methods: {
            async getData() {
                let {data} = await getViewUser({
                    t: Date.now()
                })
                Object.assign(this, data)
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {

  }

  .banner {
    //width:750px;
    height:310px;
    background:linear-gradient(210deg,rgba(50,123,254,1),rgba(58,182,255,1));
    h3 {
      padding: 50px 0 0 29px;
      font-size:42px;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }

  .user-data1 {
    width:690px;
    height:340px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -170px auto 24px auto;
  }

  .t1 {
    padding: 40px 0;
    display: flex;
    > p {
      width:2px;
      height:148px;
      background:rgba(245,245,245,1);
    }
    > div {
      flex: 1;
      text-align: center;
      p {
        font-size:30px;
        color:rgba(113,118,140,1);
        margin-bottom: 58px;
      }
      div {
        font-size:56px;
        font-weight:600;
        color:rgba(32,44,91,1);
      }

    }
  }

  .t2 {
    border-top: 2px solid #F5F5F5;
    margin: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 110px;
    label{
      &:first-of-type {
        font-size:30px;
        color:rgba(113,118,140,1);
      }
      &:last-of-type {
        font-size:48px;
        font-weight:600;
        color:rgba(32,44,91,1);
      }
    }
  }


  .user-data2 {
    height:472px;
    background:#fff;
    text-align: center;
  }


  .t-r {
    border-bottom: 2px solid #F5F5F5;
    height: 164px;
    display: flex;
  }

  .t-c {
    padding-top: 24px;
    width: 50%;
    &:first-of-type {
      border-right: 2px solid #F5F5F5;
    }
    > div {
      height: 79px;
      font-size:30px;
      color:rgba(113,118,140,1);
      p {
        font-size:22px;
        color:rgba(153,153,153,1);
        margin-top: 8px;
      }
    }
    > p {
      font-size:48px;
    }
  }

  .zhl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 46px;
    text-align: left;
    height: 140px;
    > div {
      font-size:30px;
      color:rgba(113,118,140,1);
      p {
        font-size:22px;
        color:rgba(153,153,153,1);
        margin-top: 8px;
      }
    }
    > p {
      font-size:48px;
      color:rgba(255,118,35,1);
    }
  }



</style>
















